<template>
    <div class="reqTabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane name="Body">
                <div slot="label" class="TabsTitle">
                    <span v-if="newValue.body" class="TabsTitlelabel el-icon-warning"></span>
                    Body
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <bodyBox ref="Body" :ChangeValue="ChangeValue" :bodyType="newValue.bodyType" :body="newValue.body" :fromdataValue="newValue.fromdata" :height="height"></bodyBox>
                </div>
            </el-tab-pane>
            <el-tab-pane name="Header">
                <div slot="label" class="TabsTitle">
                    <span v-if="newValue.header" class="TabsTitlelabel el-icon-warning"></span>
                    Header
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <headerBox ref="Header" :ChangeValue="ChangeValue" :header="newValue.header" :height="height">
                    </headerBox>
                </div>
            </el-tab-pane>
            <el-tab-pane name="Query">
                <div slot="label" class="TabsTitle">
                    <span v-if="newValue.query" class="TabsTitlelabel el-icon-warning"></span>
                    Query
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <queryBox ref="Query" :ChangeValue="ChangeValue" :query="newValue.query" :height="height">
                    </queryBox>
                </div>
            </el-tab-pane>
            <el-tab-pane name="Rest">
                <div slot="label" class="TabsTitle">
                    <span v-if="newValue.rest" class="TabsTitlelabel el-icon-warning"></span>
                    Rest
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <restBox ref="Rest" :ChangeValue="ChangeValue" :url="newValue.url" :rest="newValue.rest" :height="height"></restBox>
                </div>
            </el-tab-pane>
            <el-tab-pane name="request">
                <div slot="label" class="TabsTitle">
                    <span v-if="newValue.before || newValue.after" class="TabsTitlelabel el-icon-warning"></span>
                    预处理
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <beforehand ref="request" :ChangeValue="ChangeValue" :before="newValue.before" :after="newValue.after" :height="height"></beforehand>
                </div>
            </el-tab-pane>
            <div class="moveBar_content" @mousedown="mousedown($event)"></div>
        </el-tabs>
        <div class="explain" @click="switchBox">
            <el-popover trigger="hover" effect="dark" @click.native.stop placement="left">
                <div>Body ：请求主体
                    <br>GET 模式下会将Body会被忽略
                    <br>请使用Query参数
                </div>
                <br>
                <div>Header ：请求头部</div>
                <br>
                <div>Query ：地址栏中 ? 后面的参数
                    <br> 支持 JSON 方式编写
                    <br> 例如 /login?username=DevSpeed
                </div>
                <br>
                <div>
                    Rest : 地址栏中 { } 或 ：方式截取的参数信息
                    <br> 支持 JSON 方式编写
                    <br> 例如 /login/{username}
                    <br> 或 /login/:username
                </div>
                <br>
                <div>预处理 : 编写 javascript 代码，以处理响应数据
                    <br>可在API响应后对API数据显示进行处理
                    <br>或 将返回数据值存入全局变量等复杂操作
                </div>
                <i slot="reference" style="font-size: 12px;" class="el-icon-warning-outline"></i>
            </el-popover>
        </div>
        <div class="switch" @click="switchBox">
            <i class="el-icon-arrow-up" :style="{'transform': height ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
        </div>
    </div>
</template>
<script>
import headerBox from './reqOption/header';
import bodyBox from './reqOption/body'
import queryBox from './reqOption/query'
import restBox from './reqOption/rest'
import beforehand from './reqOption/beforehand'


import { mapState } from 'vuex';

export default {
    props: ['checkChangeValue', 'newValue'],
    components: {
        headerBox,
        bodyBox,
        queryBox,
        restBox,
        beforehand
    },
    data() {
        return {
            height: 300,
            startClientY: 0,
            activeName: 'Body',
            moveActive: false,
        }
    },
    computed: {
        ...mapState("theme", {
            theme: state => state.theme,
        }),
    },
    methods: {
        restore() {
            this.$refs.Body.restore();
            this.$refs.Header.restore();
            this.$refs.Query.restore();
            this.$refs.Rest.restore();
            this.$refs.request.restore();
        },
        closeChange() {
            this.$refs.Body.closeChange();
            this.$refs.Header.closeChange();
            this.$refs.Query.closeChange();
            this.$refs.Rest.closeChange();
            this.$refs.request.closeChange();
        },
        ChangeValue(key, value) {
            this.newValue[key] = value;
            this.checkChangeValue();
        },
        tagEvent() { },
        handleClick(tab, event) {
            if (this.height < 100) {
                this.height = 300
            };
            this.$nextTick(() => {
                this.$refs[tab.name].refreshEditor();
            });
        },
        switchBox() {
            if (this.height != 0) {
                this.height = 0;
            } else {
                this.height = 300;
            }
        },
        mousedown(event) {
            document.body.style.cursor = 'row-resize';
            this.startClientY = event.clientY;
            let Height = this.height;
            this.moveActive = true;
            document.onmousemove = (event) => {
                let top = event.clientY;
                this.height = top - this.startClientY + Height;
                if (this.height < 0) {
                    this.height = 0;
                };
            };
            document.onmouseup = () => {
                this.moveActive = false;
                this.startClientY = 0;
                document.body.style.cursor = '';
                document.onmousemove = null;
                document.onmouseup = null;
            }
        },
    },

}

</script>

<style>
    .reqTabs .el-tabs__nav-wrap {
        margin-right: 40px;
    }
</style>

<style scope>
    .reqTabs {
        margin: 0 20px;
        position: relative;
    }

    .TabsTitle {
        font-size: 18px;
        /* margin: 0 5px; */
    }

    .moveBar_content {
        height: 5px;
        margin: 10px 0;
    }

    .moveBar_content:hover {
        cursor: row-resize;
        background: #E4E7ED;
    }

    .moveBar_content:active {
        background: #E4E7ED;
    }

    .requesterBox {
        overflow: hidden;
        border: 1px solid #E4E7ED;
        border-top: none;
        border-radius: 0 0 4px 4px;
        /* transition: height 0.3s; */
    }

    .requesterBox.ani {
        transition: height 0.3s;
    }

    .switch {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 40px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-bottom: 2px solid #E4E7ED;

    }

    .switch i {
        transition: transform 0.3s;
    }
    .explain {
        position: absolute;
        top: 0px;
        right: 40px;
        width: 40px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-bottom: 2px solid #E4E7ED; 
    }
    

    .TabsTitlelabel { 
        font-size: 10px;
        line-height: 35px;
        vertical-align: middle;
        color: #409EFF;
    }
</style>